<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../Vue.js/vue.js"></script>
</head>
<body>
    <!-- 
        自定义指令语法：
        一、局部指令： 
            new Vue({
                directives: {指令名： 配置对象/回调函数}
            })
        二、全局指令:
            Vue.directive(指令名， 配制对象/回调函数)
        
        自定义指令按配制对象方式中的三个回调：
            bind ： 指令与元素绑定时调用
            inserted : 指令所在元素被插入页面时调用
            update： 指令所在模板结构被重新解析时调用
        
        tips: 
            指令定义时不加v-， 但在使用时要加v-
            指令名如果是多个单词，要使用kebab-case命名，不要使用camelCase命名
     -->
    <div class="root">
        <h2>当前n的值是：  <span v-text = "n"></span></h2>
        <h2>放大10倍后的n值是: <span v-big = "n"></span></h2>
        <button @click="n++">点我n++</button>
        <hr/>
        <input type="text" v-fbind:value = "n">
    </div>
</body>
<script>
    const vm = new Vue({
        el: ".root",
        data: {
            n: 10
        },
        directives: {
            //调用： 指令与元素绑定时； 当指令所在模板被重新解析时。
            big(e, binding){
                e.innerText = binding.value * 10
            },
            /*fbind(e, binding){
                e.value = binding.value
                //该语句一开始不起作用————可能是因为该input框模板并没有在组件上存在
                e.focus()
            }*/
            fbind: {
                //指令与元素成功绑定时
                bind(e, b){
                    //其中的this指向window，指令为操作节点，因此不需要vue维护 
                    e.value = b.value
                },
                //指令所在元素被插入页面时
                inserted(e, b){
                    e.focus()
                },
                //指令所在的模板被重新解析是
                update(e, b){
                    e.value = b.value
                } 
            }
        }
    })
</script>
</html>